<template>
  <div class="related-courses-list">
    <div class="related-courses-list-title">
      <strong>
        相似问答
      </strong>
    </div>
    <div class="related-courses-list-content">
      <a
        :class="['similar-item ell-1']"
        v-for="item in list"
        :key="item.object_id"
        :href="getUrl(item)"
        @click="goToDetail($event, item)"
      >
        {{ item.question }}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    getUrl(item) {
      // console.log(location);
      if (typeof window !== 'undefined') {
        let mapId = item.map_id || item.object_id
        return location.origin + '/dayi/' + mapId + item.s_p_t + '.html'
      }
      return ''
    },
    //查看问题详情
    goToDetail(event, item) {
      event.preventDefault()
      this.zlaBtn = {
        key_name: '相似问答',
        key_content: '相似问答'
      }
      if (this.isClickDetail) return
      if (!this.isClickDetail) this.isClickDetail = true
      //帖子答疑
      let params = {}
      if (+item.is_unread > 0) params.is_unread = 1
      let mapId = item.map_id || item.object_id
      let url = '/dayi/' + mapId + item.s_p_t + '.html'
      '/dayi/' + mapId + item.s_p_t + '.html'
      //s_p_t只会取值1（帖子答疑），2（对话答疑），因服务端渲染，不允许代参，代参不利于SEO
      this.goTo(url, {
        query: params,
        target: '_blank',
        watch: true
      })
      setTimeout(() => {
        this.isClickDetail = false
      }, 300)
    }
  }
}
</script>

<style scoped>
.related-courses-list {
  width: 312px;
  background: #ffffff;
  padding-top: 24px;
}

.related-courses-list-title {
  position: relative;
  height: 30px;
  font-size: 22px;
  font-weight: 600;
  color: #383838;
  line-height: 30px;
  padding-left: 20px;
}

.related-courses-list-title::after {
  display: block;
  content: '';
  width: 3px;
  height: 24px;
  background: #3480ff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.related-courses-list-content {
  margin-top: 20px;
  max-height: 350px;
  overflow-y: auto;
  padding: 0 20px 24px 20px;
  max-width: 312px;
  overflow-x: hidden;
}

.similar-item {
  display: block;
  margin-top: 20px;
  max-width: 272px;
  height: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  line-height: 20px;
  text-decoration: none;
}

.similar-item:hover {
  text-decoration: underline;
}

.similar-item:nth-of-type(1) {
  margin-top: 0px;
}

.similar-item:hover {
  color: #383838;
}
</style>
